import type {FC} from 'react';
import {
  ModalForm,
  ProFormSelect,
  ProFormDateTimePicker,
  ProFormText,
  ProFormTextArea, ProFormCascader,
} from '@ant-design/pro-form';
import type {BasicListItemDataType} from '../data.d';
import styles from '../style.less';
import {Button, FormInstance, Result, Spin} from 'antd';
import {loadCategory} from "@/services/ant-design-pro/api";
import React, {useRef, useState} from "react";
import {useModel} from "@@/plugin-model/useModel";

type OperationModalProps = {
  done: boolean;
  visible: boolean;
  current: Partial<BasicListItemDataType> | undefined;
  onDone: () => void;
  onSubmit: (values: BasicListItemDataType) => void;
};

function filter(inputValue: any, path: any) {
  // @ts-ignore
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
}

const OperationModal: FC<OperationModalProps> = (props) => {
  const {done, visible, current, onDone, onSubmit, children} = props;
  if (!visible) {
    return null;
  }
  const formRef = useRef<FormInstance>();

  const {initialState, setInitialState} = useModel('@@initialState');
  const loading = (
    <span className={`${styles.action} ${styles.account}`}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading;
  }

  const {currentUser} = initialState;

  if (!currentUser || !currentUser.name) {
    return loading;
  }
  return (
    <ModalForm<BasicListItemDataType>
      visible={visible}
      title={done ? null : `标准化申请`}
      className={styles.standardListForm}
      width={640}
      onFinish={async (values) => {
        onSubmit(values);
      }}
      formRef={formRef}
      initialValues={current}
      submitter={{
        render: (_, dom) => (done ? null : dom),
      }}
      trigger={<>{children}</>}
      modalProps={{
        onCancel: () => onDone(),
        destroyOnClose: true,
        maskClosable: false,
        bodyStyle: done ? {padding: '72px 0'} : {},
      }}
    >
      {!done ? (
        <>
          <ProFormText label="公司名称" name="enterpriseName" initialValue={currentUser.company} disabled/>
          <ProFormText label="信用代码" name="creditCode" initialValue={currentUser.enterprise.creditCode} disabled/>
          <ProFormText label="类型ID" name="typeId" hidden/>
          <ProFormText label="类型名称" name="typeName" hidden/>
          <ProFormText label="类别ID" name="categoryId" hidden/>
          <ProFormText label="类别名称" name="categoryName" hidden/>
          <ProFormCascader
            // @ts-ignore
            request={async () => {
              return loadCategory().then(({data}) => {
                return data;
              });
            }}
            rules={[{required: true, message: '请选择'}]}
            fieldProps={{
              maxTagCount: 5,
              multiple: false,
              onChange: (v, i) => {
                console.log()
                let type = i[0];
                let category = i[1];
                formRef.current?.setFieldsValue({
                  typeId: type.value,
                  typeName: type.label,
                  categoryId: category.value,
                  categoryName: category.label,
                })
              },
              showSearch: {filter: filter}
            }}
            name="typeList"
            label="类别"
          />
          <ProFormSelect
            name="level"
            label="级别"
            rules={[{required: true, message: '请选择'}]}
            initialValue={"三级"}
            options={[
              {
                label: '三级',
                value: '三级',
              },
              {
                label: '二级',
                value: '二级',
              },
            ]}
            placeholder="请选择管理员"
          />
        </>
      ) : (
        <Result
          status="success"
          title="申请成功"
          subTitle={
            <div style={{padding: "15px 50px"}}>
              你【<span style={{color: 'red'}}>{formRef.current?.getFieldValue("enterpriseName")}</span>】申报的安全生产标准化
              【<span
              style={{color: 'red'}}>{formRef.current?.getFieldValue("typeName")}-{formRef.current?.getFieldValue("categoryName")}</span>】
              【<span style={{color: 'red'}}>{formRef.current?.getFieldValue("level")}</span>】已受理，如需进度请查询
            </div>
          }
          extra={
            <Button type="primary" onClick={onDone}>
              知道了
            </Button>
          }
          className={styles.formResult}
        />
      )}
    </ModalForm>
  );
};

export default OperationModal;
